<script setup>
import {reactive,toRefs,ref} from 'vue'
import emitter from "@/utils/mitt"
 const pic = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
 let friend_list = ref([{
                    id:'1',
                    name: '张三',
                    headPic:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                },{
                    id:'2',
                    name: '李思',
                    headPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                },{
                    id:'3',
                    name: '秦始皇',
                    headPic: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                }])
function friendDetail(friend){
//发布事件
emitter.emit('friend', friend)
}
</script>
<template>
<div>
    <div class="left">
        <div v-for="(friend, index) in friend_list" :class="{'margin-top-20':index > 0}" @click="friendDetail(friend)">
            <div class="padding-left-10 float-left margin-right-10">
                <el-avatar shape="square" :size="40" fit="cover" :src="friend.headPic" />
            </div>
            <div class="padding-top-10">
                {{friend.name}}
            </div>
        </div>
    </div>
</div>
</template>
<style scoped> 
</style>